import React from 'react';
import NavMenu from '../components/NavMenu';
import SubNavMenu from '../components/SubNavMenu';
import ShowCase from '../components/ShowCase';
import Footer from '../components/Footer';
import { NAV_MENU_CONFIG } from '../constants';

class HomeView extends React.Component {

    componentDidMount() {
        this.initData();
    }
    render() {
        const { setState, actions, appData } = this.props;
        const { onTabSelect } = actions;
        const { selectTab, showcaseData=[] } = appData;
        // console.log(selectTab);
        const subMenuData = selectTab ? NAV_MENU_CONFIG.filter((a) => a.key === selectTab)[0].sub : NAV_MENU_CONFIG.filter((a) => a.key === "works")[0].sub;
        // console.log('subMenuData', subMenuData);
        console.log('showcaseData', showcaseData);
        return (
            <div className="home">
                <br />
                <br />
                <NavMenu onTabSelect={onTabSelect} data={NAV_MENU_CONFIG} />
                <br />
                <br />
                
                {selectTab ? <SubNavMenu data={subMenuData} /> : null}
                <div className="showcaseWrapper">
                {showcaseData.map((a, key) => {
                     return <ShowCase data={a} key={key}/>
                })}
                </div>
                <Footer />
                <button onClick={()=>actions.fetchAppData()}>GET DATA</button>
                <button onClick={()=>actions.fetchShowCaseData()}>GET SHOWCASE DATA</button>
            </div>
        );
    }
    initData = () => {
        const { actions } = this.props;
        actions.fetchShowCaseData();
    }
}
export default HomeView;